import React, { useEffect ,useState} from 'react'
import {useDispatch,useSelector} from "react-redux"
import {SETFENLEITYPE,LISTTYPE} from "../../types/router.d"
import axios from "../../api/axios"
import "../../utils/data"
import { Sidebar, Toast } from 'react-vant';

function Fenlei() {
  const dispatch=useDispatch();
  const [active, setActive] = useState(0);
  const [children,setChildren]=useState([])
  useEffect(()=>{
    axios.get("/fenlei").then(res=>{
      dispatch({
        type:SETFENLEITYPE,
        payload:res.data.list
      })
      setChildren(res.data.list[active].children)
    })
  },[])

  const fenleiList=useSelector((state:any)=>{
    console.log(state.fenlei)
    return state.fenlei
  })

  // const qiehuan=(active:number)=>{
  //   setActive(active)
  //   setChildren(fenleiList[active].children)
  // }

  return (
    <div className="box3">
      <div className="left">
        <Sidebar
          value={active}
          onChange={(v) => {
            setActive(v);
            setChildren(fenleiList[active].children)
          }}
        >
          {
            fenleiList&&fenleiList.map((item:LISTTYPE,index:number)=>{
              return <Sidebar.Item title={item.title} key={index} />
            })
          }
        </Sidebar>
      </div>
      <div className="right">
      {
            children&&children.map((item:LISTTYPE,index:number)=>{
              return <div className="box4" key={index}>
                <img src={item.img} alt="" />
                <p>{item.title}</p>
              </div>
            })
      }
      </div>
    </div>
  )
}

export default Fenlei